<template>
  <div>
    <h3>.sync修饰符</h3>
    <pre>
        作用:父子组件间的数据双向绑定
    </pre>
    <hr />
    <h5>{{ fatherNum }}</h5>
    <!-- <SyncSon :num="fatherNum" @update:num="setFatherNum"></SyncSon> -->
    <!-- $event就是子组件触发该方法时传入的值 -->
    <SyncSon :num.sync="fatherNum" @xxx="fatherXxx(1, $event)"></SyncSon>
    <SyncSon :num.sync="fatherNum" @xxx="fatherXxx(2, $event)"></SyncSon>
    <!-- 点击后要收到事件对象还要有一个标识  -->
    <button @click="btnClick(1, $event)">点击button1</button>
    <button @click="btnClick(2, $event)">点击button2</button>
    <!-- this.$emit('click',事件对象) -->
  </div>
</template>
<script>
import SyncSon from './compoents/SyncSon.vue'
export default {
  components: {
    SyncSon
  },
  data () {
    return {
      fatherNum: 1
    }
  },
  methods: {
    // setFatherNum (xxx) {
    //   this.fatherNum = xxx
    // }
    fatherXxx (a, b) {
      console.log('a', a)
      console.log('b', b)
    },
    btnClick (e, num) {
      console.log(e, num)
    }
  }
}
</script>
<style></style>
